<template>
  <div>
    <my-form-drawer :title="title" :width="450" :visible="visible" @ok="edit" @cancel="onClose">
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="检测规则" prop="auditRule" v-if="!isRename">
          <a-select default-value="1" style="width: 150px" v-model="form.ruleId" placeholder="检测规则">
            <a-select-option :value="item.id" v-for="(item, key) in ruleData" :key="key">
              {{ item.ruleName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="任务名称" prop="taskName">
          <a-input v-model="form.taskName" :maxLength="50" placeholder="请输入任务名称" />
        </a-form-model-item>
        <a-form-model-item label="文件地址" prop="auditFilePath" v-if="!isRename">
          <a-input v-model="form.auditFilePath" placeholder="请上传文件" :disabled="true" />
          <template>
            <a-upload name="file"
                      :multiple="true"
                      :action="uploadAction"
                      @change="handleUploadChange"
                      :headers="headers">
              <a-button>
                <a-icon type="upload" v-if="permission('sys:checkTask:saveFile')"/>
                上传
              </a-button>
            </a-upload>
          </template>
        </a-form-model-item>
        <br />
        <div v-show="form.taskType == 'bigFile'" class="remind1">
          <span style="color: rgba(0, 0, 0, 0.71)">
            <a-icon type="info-circle" style="color: red; margin-right: 5px" />
            若文件中存在公式、复杂表格等内容，可能会影响检测准确率；建议对该部分检测结果进行复核，如有疑问，请联系管理人员</span
          >
        </div>
        <div v-show="form.taskType == 'audio'" class="remind2">
          <span style="color: rgba(0, 0, 0, 0.71)"
            ><a-icon type="info-circle" style="color: red; margin-right: 5px" />
            音频质量可能影响检测结果，为提高语音检测准确率，请上传质量较高的音频进行检测；如有疑问，请联系管理人员</span
          >
        </div>
      </a-form-model>
    </my-form-drawer>
    <upload-notice ref="UploadNotice" />
  </div>
</template>

<script>
import MyFormDrawer from '@/components/drawer/MyFormDrawer';
import UploadNotice from '@/pages/verify/components/UploadNotice.vue';
import { rule } from '@/utils/validateRules';
import { upload, updateRecord } from '../../services/verify';
import { list } from '@/services/checkRule';
import Cookie from 'js-cookie';
import {generateTaskName, getAUploadAccept} from "../../utils/util";

export default {
  name: 'ImageVerifyUpload',
  components: { MyFormDrawer, UploadNotice },
  data() {
    return {
      uploadAction: '', //文件上传地址
      uploadAccept: '', //支持文件格式
      headers: {
        Authorization: Cookie.get('Authorization'),
      },
      title: '',
      form: {
        taskType: '',
        ruleId: '1',
        taskName: '',
        auditFilePath: '',
      },
      visible: false,
      isRename: false,
      rules: {
        word: [
          { required: true, message: '敏感词不能为空', trigger: 'taskName' },
          { validator: rule.checkSpace, message: '敏感词不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.ruleList();
  },
  methods: {
    permission(name) {
      let permissions = this.$store.getters['account/permissions'];
      return permissions.filter((m) => m.id == name || m.operation.indexOf(name) >= 0).length > 0;
    },
    ruleData: [],
    initData() {
      this.form = {
        auditFilePath: '',
      };
    },
    //video image audio bigFile
    //视频 图片 音频 图文
    changeForm(state, data, isRename, taskType, ruleId) {
      this.uploadAction = '/api/verify/saveFile?taskType='+ taskType
      this.uploadAccept = getAUploadAccept(taskType)
      this.form.ruleId = ruleId;
      this.form.taskType = taskType;
      console.log(isRename);
      this.isRename = isRename;
      this.visible = state;
      this.title = '上传文件';
      this.form = Object.assign(this.form, data);
    },
    handleUploadChange: function (info) {
      let fileSize = info.file.size/(1024*1024);
      //文件大小超过最大值
      if (fileSize>=1024){
        this.$message.error(`目前仅支持小于1G的文件上传审核`);
        return;
      }
      if (info.file.status === 'done') {
        let sourceFileName = info.file.name
        if (info.file.response.code == 0){
          this.$message.success(`上传成功`);
          this.form.auditFilePath = info.file.response.data;
          this.form.taskName = generateTaskName(sourceFileName, this.form.taskType);
        }else {
          this.$message.error(info.file.response.message);
        }

      } else if (info.file.status === 'error') {
        this.$message.error(`上传失败`);
      }
    },
    onClose() {
      this.visible = false;
      this.$refs['form'].clearValidate();
      this.initData();
    },
    ruleList() {
      list().then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.ruleData = res.data.data;
          console.log(this.ruleData, res.data);
        }
      });
    },
    edit() {
      if (this.form.taskName == null || this.form.taskName === '') {
        this.$message.error(`名词不能为空`);
        return;
      }
      console.log(this.isRename);
      if (this.isRename) {
        updateRecord({ id: this.form.id, taskName: this.form.taskName }).then((res) => {
          console.log(res);
          if (res.data.code === 0) {
            this.$message.success('修改成功');
            this.onClose();
            this.$emit('getList');
          }
        });
      } else {
        upload(this.form).then((res) => {
          if (res.data.code === 0) {
            this.$message.success('上传成功');
            if(this.form.taskType == 'audio' || this.form.taskType == 'bigFile' || this.form.taskType == 'video'){
            this.$refs.UploadNotice.show(true,this.form.taskType);
            }
            this.onClose();
            this.$emit('getList');
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.remind1 {
  width: 410px;
  height: 90px;
  background: rgba(169, 180, 206, 0.14);
  border-radius: 7px 7px 7px 7px;
  opacity: 1;
  padding: 12px 15px 0 15px;
}

.remind2 {
  width: 410px;
  height: 70px;
  background: rgba(169, 180, 206, 0.14);
  border-radius: 7px 7px 7px 7px;
  opacity: 1;
  padding: 12px 15px 0 15px;
}
</style>
